<template>
    <div class="page-layout" v-if="!!approveInfo.length">
        <header>
           <el-form :model="page"
            ref="ruleForm"
            size="small"
            label-width="80px">
            <!-- prop属性是给rules使用的，表示使用rules中的name属性进行数据校验 -->
            <el-row>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="产品名字" prop="name">
                        <el-input readonly v-model="page.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="产品状态" prop="state">
                        <el-input readonly value='新建'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="成本价" prop="pure_price">
                        <el-input readonly v-model="page.pure_price" type='number'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="定价" prop="price">
                        <el-input readonly v-model="page.price" type='number'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="优惠" prop="discount">
                        <el-input readonly v-model="page.discount" type='number'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="限购" prop="limit">
                        <el-input readonly v-model="page.limit" type='number'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="上架时间" prop="sale_stime">
                        <el-input readonly v-model="page.sale_stime">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="下架时间" prop="sale_etime">
                        <el-input readonly v-model="page.sale_etime">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="类型" prop="type">
                        <el-input readonly v-model="page.type"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="单位" prop="unit">
                        <el-input readonly v-model="page.unit"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="品级" prop="level">
                        <el-input readonly v-model="page.level"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="产地" prop="place">
                        <el-input readonly v-model="page.place"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="品牌" prop="brand">
                        <el-input readonly v-model="page.brand"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="详情" prop="detail">
                        <div class="Detail" v-if="detailArr.length" >
                            <img  v-for="(it,i) in detailArr" :key="i" class="my-detail" :src="`http://www.shuiyue.info:21000${detailArr[i]}`"/>
                        </div>
                        <div class="Detail" v-else style="color:red" >
                            用户没有上传详情图
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="banner" prop="banner">
                        <div class="Banner" v-if="!!bannerArr.length" >
                            <img v-for="(it,i) in bannerArr" :key="i" class="my-banner" :src="`http://www.shuiyue.info:21000${bannerArr[i]}`"/>
                        </div>
                        <div class="Banner" style="color:red" v-else>
                            用户没有上传轮播图
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="备注" prop="remark">
                        <el-input readonly v-model="page.remark"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item>
                       <p >成分材料:</p>
                        <el-table
                        :data="page.list"
                        size='small'
                        >
                            <el-table-column prop="name" label="成分名字" width="100" fixed>
                            </el-table-column>
                            <el-table-column prop="count" label="数量" width="80">
                            </el-table-column>
                            <el-table-column prop="price" label="价格" width="100">
                            </el-table-column>
                            <el-table-column prop="supplier_name" label="厂商" width="100">
                            </el-table-column>
                            <el-table-column prop="type" label="类型" width="80">
                            </el-table-column>
                            <el-table-column prop="unit" label="单位" width="80">
                            </el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="place" label="产地" width="90">
                            </el-table-column>
                            <el-table-column prop="brand" label="品牌" width="100">
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        </header>
        <main>
        <div class="my-approve">审批信息</div>
        <el-timeline v-for="(it,index) in approveInfo" :key="index">
            <el-timeline-item :timestamp="it.createdAt" placement="top">
            <el-card>
                <h4>{{it.remark}}</h4>
                <p>{{`${it.user_name} 提交于 ${it.time}`}}</p>
            </el-card>
            </el-timeline-item>
        </el-timeline>
        </main>
        <footer></footer>
    </div>
    <div v-else>从产品列表里面获取你想要的产品详情</div>
</template>
<script>
import { productApproveListApi, productInfoApi } from '@/apis/productApi'
export default {
    data() {
        return {
            goodsInfo:{},
            approveInfo:[],
            page: {
                "list": [],
                "name": "",
                "state": "new",
                "pure_price": 0,
                "price": 0,
                "discount": 0,
                "limit": 0,
                "sale_stime": "",
                "sale_etime": "",
                "type": "",
                "unit": "",
                "level": "",
                "place": "",
                "brand": "",
                "detail": [],
                "banner": [],
                "remark": ""
            },
            detailArr:[],
            bannerArr:[],
        }
    },
    // beforeMount(){
    //     setTimeout(()=>{
    //          this.$forceUpdate()
    //     },100)
    // },
       mounted(){
        //  this.$forceUpdate()
        // setTimeout(()=>{
        // // window.location.reload()
        // },100)
         productInfoApi(this.$route.query.id).then(d=>{
            if(d.code===200){
                this.page=d.data
                this.page.sale_stime=this.page.sale_stime.split('T')[0]
                this.page.sale_etime=this.page.sale_etime.split('T')[0]
                this.detailArr=this.page.detail.split('--').slice(0,this.detailArr.length-1)
                this.bannerArr=this.page.banner.split('--').slice(0,this.bannerArr.length-1)
                this.page.list=d.data.GoodsdetModels
            }
         })
         productApproveListApi(this.$route.query.id).then(res=>{
            if(this.$route.query.id){
                 this.approveInfo=res.data.rows
            // console.log(this.approveInfo)
            this.approveInfo.map(it=>it.time=it.time.split('T')[0]+' '+(it.time.split('T')[1].split(':')[0]-0+8)+':'+it.time.split('T')[1].split(':')[1]+':'+it.time.split('T')[1].split(':')[2].substring(0,2))
            }
            else{
                return
            }
         })
    }
}
</script>
<style lang="less" scoped>
@import url('./index.less');
</style>